為什麼不使用 <a> 標籤進行路由導航？

在 React 中，不建議直接使用一般的 <a> 標籤進行導航，原因如下：

1. 重新加載整個頁面：使用 <a> 標籤進行導航將導致整個頁面重新加載，這會影響應用程式的性能並造成不必要的頁面刷新。
2. 狀態丟失：當使用 <a> 標籤時，應用程式的狀態可能會丟失，因為頁面完全重新載入，而不會保留之前的狀態。

為了實現不需要刷新整個頁面的導航，React Router 提供了兩個元件：Link 和 NavLink。

今天我們將認識這兩個元件，了解它們的不同之處以及為什麼它們比一般的 <a> 標籤更適合用於 React 路由。

Link 元件

Link 元件是 React Router 提供的元件之一，用於實現內部路由導航，它具有以下特點：

1. 不需要刷新頁面：使用 Link 元件，可以實現在應用程序內部不同路由之間的導航，而無需重新加載整個頁面，提高了應用程式的性能和使用者體驗。
2. 自動處理路由匹配：Link 會自動處理路由的匹配，以確保生成的連結與應用程序中的路由匹配。

下面是一個範例：

import { Link } from "react-router-dom";

function PageNav() {
  return (
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/product">Product</Link>
        </li>
        <li>
          <Link to="/pricing">Pricing</Link>
        </li>
      </ul>
    </nav>
  );
}

NavLink 元件

NavLink 元件相比 Link 元件，提供了一些額外的功能，NavLink 會根據當前的路由自動添加一個名為 active 的 class，以突出顯示當前選中的連結。

下面是一個範例：

import { NavLink } from "react-router-dom";

function PageNav() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/product">
            Product
          </NavLink>
        </li>
        <li>
          <NavLink to="/pricing">
            Pricing
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

假設我們在 /pricing 這個路由，查看時會發現 a 元素被加上了一個名為 active 的 class，因此，我們可以透過這個 class 來自定義樣式。

<a aria-current="page" class="active" href="/pricing">Pricing</a>

結語

React Router 提供的 Link 和 NavLink 元件更適合在 React 應用程序中進行路由導航，它們可以實現無縫的導航體驗，提高性能並保留應用程式的狀態。